<template>
    <el-container class="home_container">
        <!-- 头部区域 -->
        <el-header>
            <div>
                <img src="@/assets/logo.png" alt="">
                <span>欢迎使用</span>
            </div>
            <div>电商后台管理系统</div>
            <el-button type="info" @click="logout">退出</el-button>
        </el-header>
        <!-- 主题区域 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200px">
                <Left/>
            </el-aside>
            <!-- 右侧主体 -->
            <el-main>
                <router-view>

                </router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import Left from '@/components/Left'
export default {
    components:{Left},
    name: '',
    data() {
        return {
        };
    },
    methods: {
        // 退出登录
        logout() {
            window.sessionStorage.clear();
            this.$router.push('/login')
        },
    },

}

</script>
<style lang='less' scoped>
.el-header{
    background-color: darkcyan;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    >div{
        display: flex;
        align-items: center;
        span{
            margin-left: 15px;
        }
    }
    img{
        height: 50px;
        width: 50px;
        border-radius: 50%;
    }
}
.home_container{
    height: 100%;
}
.el-aside{
    background-color: #333744;
}
.el-main{
    background-color: #eee;
}


</style>